import * as Blockly from 'blockly';

export class CustomCategory extends Blockly.ToolboxCategory {

    constructor(categoryDef, toolbox, opt_parent) {
        super(categoryDef, toolbox, opt_parent);
    }

    addColourBorder_(colour) {
        this.rowDiv_.style.backgroundColor = colour;
    }

    setSelected(isSelected) {
        // We do not store the label span on the category, so use getElementsByClassName.
        var labelDom = this.rowDiv_.getElementsByClassName('blocklyTreeLabel')[0];
        if (isSelected) {
            // Change the background color of the div to white.
            this.rowDiv_.style.backgroundColor = 'white';
            // Set the colour of the text to the colour of the category.
            labelDom.style.color = this.colour_;
        } else {
            // Set the background back to the original colour.
            this.rowDiv_.style.backgroundColor = this.colour_;
            // Set the text back to white.
            labelDom.style.color = 'white';
        }
        // This is used for accessibility purposes.
        Blockly.utils.aria.setState(/** @type {!Element} */(this.htmlDiv_),
            Blockly.utils.aria.State.SELECTED, isSelected);
    }

    /** @override */
    createIconDom_() {
        const img = document.createElement('img');
        switch (this.name_) {
            case "米家":
                img.src = '../assets/icon1.png';
                break;
            case "逻辑":
                img.src = '../assets/icon2.png';
                break;
            case "循环":
                img.src = '../assets/icon3.png';
                break;
            case "数学":
                img.src = '../assets/icon4.png';
                break;
            case "文本":
                img.src = '../assets/icon5.png';
                break;
            case "列表":
                img.src = '../assets/icon6.png';
                break;
            case "变量":
                img.src = '../assets/icon7.png';
                break;
            case "函数":
                img.src = '../assets/icon8.png';
                break;
            case "时间":
                img.src = '../assets/icon9.png';
                break;
            default:
                img.src = '../assets/icon1.png';
                break;
        }
        img.alt = this.name_;
        img.width = '20';
        img.height = '20';
        return img;
    }
}